<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <!-- 用了一个行列布局 -->
        <!-- 头部公司信息 -->
        <TreeTools
          :tree-data="company"
          :is-root="true"
          @addDepts="addDepts"
        />
        <hr>
        <!-- 树形组件 -->
        <el-tree
          :default-expand-all="true"
          :data="departs"
          :props="{ label: 'name' }"
          :expand-on-click-node="false"
        >
          <!-- 这里利用插槽的形式, 自定义树形节点渲染
          因为树形遍历是在饿了么内部完成的
          所以需要作用域插槽 slot-scope 获取每一个被遍历到的部门
          传入子组件当中, 进行显示 -->
          <TreeTools
            slot-scope="scope"
            :tree-data="scope.data"
            @delDepts="getDepartments"
            @addDepts="addDepts"
            @editDepts="editDepts"
          />
        </el-tree>
        <AddDepts
          ref="addDialog"
          :show-dialog.sync="showDialog"
          :node="node"
          @addDepts="getDepartments"
        />
      </el-card>
    </div>
  </div>
</template>

<script>
import TreeTools from './components/tree-tools'
import { getDepartments } from '@/api/departments'
import { tranListToTreeData } from '@/utils/index'
import AddDepts from './components/add-dept'
export default {
  components: {
    TreeTools,
    AddDepts
  },
  data () {
    return {
      showDialog: false, // 显示窗体
      company: {
        name: '稀里哗啦',
        manager: '负责人'
      },
      departs: [],
      node: {}
    }
  },
  created () {
    this.getDepartments()
  },
  methods: {
    async getDepartments () {
      const res = await getDepartments()
      console.log(res)
      // this.company.name = res.companyName
      this.departs = tranListToTreeData(res.depts, '')
    },
    addDepts (node) {
      this.showDialog = true
      this.node = node
    },
    async editDepts (node) {
      // 其实编辑和新增获取点击的数据和弹出弹窗处理是一样
      // 唯一的区别是, 如果编辑需要获取旧数据进行回显
      // 只有父组件这里才能知道需要回显数据
      // 所以在这调用子组件的回显方法
      await this.$refs.addDialog.getDepartmentDetail(node.id)
      this.showDialog = true
      this.node = node
    }
  }
}
</script>

<style scoped>
.tree-card {
  padding: 30px 140px;
  font-size: 14px;
}
</style>
